<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-resizer.Splitter'>/**
</span> * @class Ext.resizer.Splitter
 * @extends Ext.Component
 * &lt;p&gt;This class functions &lt;b&gt;between siblings of a {@link Ext.layout.container.VBox VBox} or {@link Ext.layout.container.HBox HBox}
 * layout&lt;/b&gt; to resize both immediate siblings.&lt;/p&gt;
 * &lt;p&gt;By default it will set the size of both siblings. &lt;b&gt;One&lt;/b&gt; of the siblings may be configured with
 * &lt;code&gt;{@link Ext.Component#maintainFlex maintainFlex}: true&lt;/code&gt; which will cause it not to receive a new size explicitly, but to be resized
 * by the layout.&lt;/p&gt;
 * &lt;p&gt;A Splitter may be configured to show a centered mini-collapse tool orientated to collapse the {@link #collapseTarget}.
 * The Splitter will then call that sibling Panel's {@link Ext.panel.Panel#collapse collapse} or {@link Ext.panel.Panel#expand expand} method
 * to perform the appropriate operation (depending on the sibling collapse state). To create the mini-collapse tool but take care
 * of collapsing yourself, configure the splitter with &lt;code&gt;{@link #performCollapse} false&lt;/code&gt;.&lt;/p&gt;
 *
 * @xtype splitter
 */
Ext.define('Ext.resizer.Splitter', {
    extend: 'Ext.Component',
    requires: ['Ext.XTemplate'],
    uses: ['Ext.resizer.SplitterTracker'],
    alias: 'widget.splitter',

    renderTpl: [
        '&lt;tpl if=&quot;collapsible===true&quot;&gt;&lt;div class=&quot;' + Ext.baseCSSPrefix + 'collapse-el ' + Ext.baseCSSPrefix + 'layout-split-{collapseDir}&quot;&gt;&amp;nbsp;&lt;/div&gt;&lt;/tpl&gt;'
    ],

    baseCls: Ext.baseCSSPrefix + 'splitter',
    collapsedCls: Ext.baseCSSPrefix + 'splitter-collapsed',

<span id='Ext-resizer.Splitter-cfg-collapsible'>    /**
</span>     * @cfg {Boolean} collapsible
     * &lt;code&gt;true&lt;/code&gt; to show a mini-collapse tool in the Splitter to toggle expand and collapse on the {@link #collapseTarget} Panel.
     * Defaults to the {@link Ext.panel.Panel#collapsible collapsible} setting of the Panel.
     */
    collapsible: false,

<span id='Ext-resizer.Splitter-cfg-performCollapse'>    /**
</span>     * @cfg {Boolean} performCollapse
     * &lt;p&gt;Set to &lt;code&gt;false&lt;/code&gt; to prevent this Splitter's mini-collapse tool from managing the collapse
     * state of the {@link #collapseTarget}.&lt;/p&gt;
     */

<span id='Ext-resizer.Splitter-cfg-collapseOnDblClick'>    /**
</span>     * @cfg {Boolean} collapseOnDblClick
     * &lt;code&gt;true&lt;/code&gt; to enable dblclick to toggle expand and collapse on the {@link #collapseTarget} Panel.
     */
    collapseOnDblClick: true,

<span id='Ext-resizer.Splitter-cfg-defaultSplitMin'>    /**
</span>     * @cfg {Number} defaultSplitMin
     * Provides a default minimum width or height for the two components
     * that the splitter is between.
     */
    defaultSplitMin: 40,

<span id='Ext-resizer.Splitter-cfg-defaultSplitMax'>    /**
</span>     * @cfg {Number} defaultSplitMax
     * Provides a default maximum width or height for the two components
     * that the splitter is between.
     */
    defaultSplitMax: 1000,

    width: 5,
    height: 5,

<span id='Ext-resizer.Splitter-cfg-collapseTarget'>    /**
</span>     * @cfg {Mixed} collapseTarget
     * &lt;p&gt;A string describing the relative position of the immediate sibling Panel to collapse. May be 'prev' or 'next' (Defaults to 'next')&lt;/p&gt;
     * &lt;p&gt;Or the immediate sibling Panel to collapse.&lt;/p&gt;
     * &lt;p&gt;The orientation of the mini-collapse tool will be inferred from this setting.&lt;/p&gt;
     * &lt;p&gt;&lt;b&gt;Note that only Panels may be collapsed.&lt;/b&gt;&lt;/p&gt;
     */
    collapseTarget: 'next',

<span id='Ext-resizer.Splitter-property-orientation'>    /**
</span>     * @property orientation
     * @type String
     * Orientation of this Splitter. &lt;code&gt;'vertical'&lt;/code&gt; when used in an hbox layout, &lt;code&gt;'horizontal'&lt;/code&gt;
     * when used in a vbox layout.
     */

    onRender: function() {
        var me = this,
            target = me.getCollapseTarget(),
            collapseDir = me.getCollapseDirection();

        Ext.applyIf(me.renderData, {
            collapseDir: collapseDir,
            collapsible: me.collapsible || target.collapsible
        });
        Ext.applyIf(me.renderSelectors, {
            collapseEl: '.' + Ext.baseCSSPrefix + 'collapse-el'
        });

        this.callParent(arguments);

        // Add listeners on the mini-collapse tool unless performCollapse is set to false
        if (me.performCollapse !== false) {
            if (me.renderData.collapsible) {
                me.mon(me.collapseEl, 'click', me.toggleTargetCmp, me);
            }
            if (me.collapseOnDblClick) {
                me.mon(me.el, 'dblclick', me.toggleTargetCmp, me);
            }
        }

        // Ensure the mini collapse icon is set to the correct direction when the target is collapsed/expanded by any means
        me.mon(target, 'collapse', me.onTargetCollapse, me);
        me.mon(target, 'expand', me.onTargetExpand, me);

        me.el.addCls(me.baseCls + '-' + me.orientation);
        me.el.unselectable();

        me.tracker = Ext.create('Ext.resizer.SplitterTracker', {
            el: me.el
        });
    },

    getCollapseDirection: function() {
        var me = this,
            idx,
            type = me.ownerCt.layout.type;

        // Avoid duplication of string tests.
        // Create a two bit truth table of the configuration of the Splitter:
        // Collapse Target | orientation
        //        0              0             = next, horizontal
        //        0              1             = next, vertical
        //        1              0             = prev, horizontal
        //        1              1             = prev, vertical
        if (me.collapseTarget.isComponent) {
            idx = Number(me.ownerCt.items.indexOf(me.collapseTarget) == me.ownerCt.items.indexOf(me) - 1) &lt;&lt; 1 | Number(type == 'hbox');
        } else {
            idx = Number(me.collapseTarget == 'prev') &lt;&lt; 1 | Number(type == 'hbox');
        }

        // Read the data out the truth table
        me.orientation = ['horizontal', 'vertical'][idx &amp; 1];
        return ['bottom', 'right', 'top', 'left'][idx];
    },

    getCollapseTarget: function() {
        return this.collapseTarget.isComponent ? this.collapseTarget : this.collapseTarget == 'prev' ? this.previousSibling() : this.nextSibling();
    },

    onTargetCollapse: function(target) {
        this.el.addCls(this.collapsedCls);
    },

    onTargetExpand: function(target) {
        this.el.removeCls(this.collapsedCls);
    },

    toggleTargetCmp: function(e, t) {
        var cmp = this.getCollapseTarget();

        if (cmp.isVisible()) {
            // restore
            if (cmp.collapsed) {
                cmp.expand(cmp.animCollapse);
            // collapse
            } else {
                cmp.collapse(this.renderData.collapseDir, cmp.animCollapse);
            }
        }
    },

    /*
     * Work around IE bug. %age margins do not get recalculated on element resize unless repaint called.
     */
    setSize: function() {
        var me = this;
        me.callParent(arguments);
        if (Ext.isIE) {
            me.el.repaint();
        }
    }
});
</pre></pre></body></html>